import 'package:flutter/material.dart';

class PayMent extends StatefulWidget {
  const PayMent({Key? key, required this.item, required this.count}) : super(key: key);
  final item;
  final int count;

  @override
  _PayMentState createState() => _PayMentState();
}

class _PayMentState extends State<PayMent> {
  late int tabIndex;
  List tabs = [
    {'title': '在线支付', 'desc': '支持支付宝支付、微信支付、银行卡支付、财付通等'},
    {'title': '花呗分期', 'desc': '众享花呗，花光马云的钱'},
    {'title': '货到付款', 'desc': '货到付款。让你验货后再签收付款，更安全，更放心'}
  ];
  @override
  void initState() {
    tabIndex = 0;
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Transform(
          transform: Matrix4.translationValues(-24, 0.0, 0.0),
          child: const Text('商品详情',style: TextStyle(color: Colors.black,fontSize: 16.0)),
        ),
        toolbarHeight: 50.0,
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new_sharp, color: Colors.black, size: 16,),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: Container(
        color: const Color(0xfff5f5f5),
        child: SingleChildScrollView(
          padding: const EdgeInsets.only(top: 1.5),
          scrollDirection: Axis.vertical,
          primary: true,
          physics: const ScrollPhysics(),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container( // 收件人信息
                color: Colors.white,
                margin: const EdgeInsets.only(bottom: 10.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.fromLTRB(36, 10, 36, 5.5),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: const [
                          Text('收货人：志远呀', style: TextStyle(fontSize: 14.0, color: Colors.black),),
                          Text('18779434489',style: TextStyle(fontSize: 14.0, color: Colors.black)),
                        ],
                      ),
                    ),
                    const Padding(
                      padding: EdgeInsets.fromLTRB(36, 5.5, 36, 10),
                      child: Text(
                        '收货地址：浙江省杭州市滨江区春波南苑19幢701',
                        style: TextStyle(fontSize: 14.0, color: Colors.black),
                      ),
                    ),
                    const Image(image: AssetImage('assets/images/line.png'))
                  ],
                ),
              ),
              Container( //商品信息
                margin: const EdgeInsets.only(bottom: 10.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width,
                      padding: const EdgeInsets.fromLTRB(22,15,0,15),
                      child: const Text('商品清单', style: TextStyle(fontSize: 14.0, color: Colors.black),),
                      decoration: const BoxDecoration(
                        border: Border(bottom: BorderSide(width: 1.0, color: Color(0xffcecece))),
                        color: Colors.white,
                      ),
                    ),
                    Container(
                      color: const Color(0xfffafafa),
                      padding: const EdgeInsets.fromLTRB(0, 12, 0, 12),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Image(image: AssetImage(widget.item['img']), width: 104,),
                              Padding(
                                padding: const EdgeInsets.only(left: 5.0),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    RichText(
                                      text: const TextSpan(
                                          text: 'X9Plus ',
                                          style: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.w900),
                                          children: [
                                            TextSpan(
                                              text: '全网通',
                                              style: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.w400),
                                            )
                                          ]
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.fromLTRB(0, 5, 5, 0),
                                      child: Text('¥${widget.item['price'].toDouble()}', style: const TextStyle(color: Color(0xffee0b26), fontSize: 12.0)),
                                    )
                                  ],
                                ),
                              ),
                            ],
                          ),
                          Padding(
                            padding: EdgeInsets.only(right: 10.0),
                            child: Text('x${widget.count}'),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Container( //发票信息
                margin: const EdgeInsets.only(bottom: 10.0),
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width,
                      padding: const EdgeInsets.fromLTRB(22,15,22,15),
                      child: const Text('发票信息', style: TextStyle(fontSize: 14.0, color: Colors.black),),
                      decoration: const BoxDecoration(
                        border: Border(bottom: BorderSide(width: 1.0, color: Color(0xffcecece))),
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.fromLTRB(22, 11, 22, 11),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(right: 36.0),
                            child: RichText(
                              text: const TextSpan(
                                  text: '*',
                                  style: TextStyle(color: Color(0xffea0000), fontSize: 14),
                                  children: [
                                    TextSpan(
                                      text: '发票抬头',
                                      style: TextStyle(color: Colors.black, fontSize: 14),
                                    )
                                  ]
                              ),
                            ),
                          ),
                          const Expanded(
                            flex: 1,
                            child: SizedBox(
                              height: 26,
                              child: TextField(
                                decoration: InputDecoration(
                                  enabledBorder: OutlineInputBorder(
                                    /*边角*/
                                    // borderRadius: BorderRadius.all(
                                    //   Radius.circular(30), //边角为30
                                    // ),
                                    borderSide: BorderSide(
                                      color: Color(0xffbebebe), //边线颜色为黄色
                                      width: 1, //边线宽度为2
                                    ),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                      borderSide: BorderSide(
                                        color: Color(0xffbebebe), //边框颜色为绿色
                                        width: 1, //宽度为5
                                      )
                                  ),
                                  hintText: "请输入发票信息",
                                  contentPadding: EdgeInsets.only(left: 16),
                                ),
                                style: TextStyle(fontSize: 14.0, color: Color(0xffa4a5a7)),
                                cursorWidth: 2.0,
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Container( //支付方式
                margin: const EdgeInsets.only(bottom: 10.0),
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width,
                      padding: const EdgeInsets.fromLTRB(22,15,22,15),
                      child: const Text('支付方式', style: TextStyle(fontSize: 14.0, color: Colors.black),),
                      decoration: const BoxDecoration(
                        border: Border(bottom: BorderSide(width: 1.0, color: Color(0xffcecece))),
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.fromLTRB(22, 30, 22, 30),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: tabs.map((item){
                              return Expanded(
                                child: GestureDetector(
                                  onTap: (){
                                    int index = tabs.indexOf(item);
                                    setState(() {
                                      tabIndex = index;
                                    });
                                  },
                                  child: Container(
                                    padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
                                    decoration: BoxDecoration(
                                        border: Border( //边框
                                            top: const BorderSide(width: 1.0,color: Color(0xffe90000)),
                                            bottom: const BorderSide(width: 1.0,color: Color(0xffe90000)),
                                            left: item != tabs[tabs.length - 1] ?const BorderSide(width: 1.0,color: Color(0xffe90000)) : const BorderSide(width: 0, color: Colors.transparent),
                                            right: item != tabs[0] ?const BorderSide(width: 1.0,color: Color(0xffe90000)) : const BorderSide(width: 0, color: Colors.transparent)
                                        ),
                                        // 圆角
                                        // borderRadius: item == tabs[0] ? const BorderRadius.only(topLeft: Radius.circular(2.0), bottomLeft: Radius.circular(2.0)) : item == tabs[tabs.length - 1] ? const BorderRadius.only(topRight: Radius.circular(2.0), bottomRight: Radius.circular(2.0)) : BorderRadius.zero,
                                        // 背景色
                                        color: item == tabs[tabIndex]?const Color(0xffe90000):Colors.transparent
                                    ),
                                    child: Center(
                                        child: Text('${item['title']}', style: TextStyle(color: item == tabs[tabIndex]?Colors.white: const Color(0xffe90000)),)
                                    ),
                                  ),
                                ),
                              );
                            }).toList(),
                          ),
                          Padding(
                            padding: const EdgeInsets.fromLTRB(0, 19, 0, 19),
                            child: Text(tabs[tabIndex]['desc']),
                          )
                        ],
                      )
                    ),
                  ],
                ),
              ),
              Container( //订单留言
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width,
                      padding: const EdgeInsets.fromLTRB(22,15,22,15),
                      child: const Text('订单留言', style: TextStyle(fontSize: 14.0, color: Colors.black),),
                      decoration: const BoxDecoration(
                        border: Border(bottom: BorderSide(width: 1.0, color: Color(0xffcecece))),
                      ),
                    ),
                    Container(
                        padding: const EdgeInsets.fromLTRB(22, 10, 20, 10),
                        decoration: const BoxDecoration(
                          border: Border(bottom: BorderSide(width: 1.0, color: Color(0xffcecece))),
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            const SizedBox(
                              height: 74,
                              child: TextField(
                                decoration: InputDecoration(
                                  enabledBorder: OutlineInputBorder(
                                    /*边角*/
                                    // borderRadius: BorderRadius.all(
                                    //   Radius.circular(30), //边角为30
                                    // ),
                                    borderSide: BorderSide(
                                      color: Color(0xffbebebe), //边线颜色为黄色
                                      width: 1, //边线宽度为2
                                    ),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                      color: Color(0xffbebebe), //边框颜色为绿色
                                      width: 1, //宽度为5
                                    )
                                  ),
                                  hintText: "限300字(若有特殊需求,请联系商城在线客服)",
                                  contentPadding: EdgeInsets.fromLTRB( 16.0,5,16.0,5 ),
                                ),
                                style: TextStyle(fontSize: 14.0, color: Color(0xffa4a5a7)),
                                cursorWidth: 2.0,
                                maxLines: 5,
                                // maxLength: 300,
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 10.0),
                              padding: const EdgeInsets.only(top: 6.0),
                              decoration: const BoxDecoration(
                                border: Border(top: BorderSide(width: 1.0, color: Color(0xfff2f3f5)))
                              ),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text('商品总金额：¥ ${(widget.item['price']*widget.count).toDouble()}', style: const TextStyle(color: Color(0xffa0a0a2), fontSize: 13.0),),
                                  const Text('运费：0.00', style: TextStyle(color: Color(0xffa0a0a2), fontSize: 13.0),),
                                  const Text('优惠：¥ 0.00', style: TextStyle(color: Color(0xffa0a0a2), fontSize: 13.0),),
                                  Text('赠送积分：${widget.item['price']*widget.count}', style: const TextStyle(color: Color(0xffa0a0a2), fontSize: 13.0),)
                                ],
                              ),
                            )
                          ],
                        )
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        child: SizedBox(
          height: 46.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 10.0),
                child: RichText(
                  text: TextSpan(
                    text: '订单总金额：',
                    style: const TextStyle(color: Colors.black, fontSize: 16.0),
                    children: [
                      TextSpan(
                        text: '¥ ${(widget.item['price']*widget.count).toDouble()}',
                        style: const TextStyle(color: Color(0xffee0b26), fontSize: 15.0)
                      )
                    ]
                  )
                ),
              ),
              SizedBox(
                height: 46.0,
                child: ElevatedButton(
                  onPressed: (){ print('提交订单'); },
                  child: const Text('提交订单'),
                  style: ButtonStyle(
                    textStyle: MaterialStateProperty.all(const TextStyle(fontSize: 15, color: Color(0xffcccccc))),
                    backgroundColor: MaterialStateProperty.all(const Color(0xffdb1c2a)),
                    shape: MaterialStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)))
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
